<template>
  <el-dialog
      title="新增用户"
      :visible.sync="open"
      width="700px"
      append-to-body
      @close="resetForm"
  >
    <span style='font-size: 17px;'>基本信息</span>
    <br>
<!--        {{JSON.stringify(form,null,4)}}-->
    <el-form ref="form" :rules="rules" :model="form" label-width="120px" style='margin-top: 20px;'>
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户姓名" prop="name" >
            <el-input @input="grtAccount"
                v-model="form.name"
                placeholder="请输入姓名"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户组织类型" prop="type" >
            <el-select v-model="form.type" disabled placeholder="请选择" style="width:100%">
              <el-option label="外部" value="0"/>
              <el-option label="内部" value="1"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户编码" prop="account">
            <el-input disabled
                      v-model="form.account"
                      placeholder="根据用户姓名自动生成"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户手机号" prop="phone" >
            <el-input v-model="form.phone" maxlength="11" placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="证件类型" prop="idType">
            <el-select v-model="form.idType" disabled placeholder="请选择" style="width:100%">
              <el-option label="身份证" value="2"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件号码" prop="idNo">
            <el-input v-model="form.idNo" placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="所属组织" prop="enterpriseId">
            <el-select @change="enterpriseChange" v-model="form.enterpriseId" filterable clearable  placeholder="请选择" style="width:100%">
              <el-option v-for="item in organizationList" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="其他组织" prop="idType">
            <el-select v-model="form.enterpriseOtherId" filterable clearable multiple placeholder="请选择" style="width:100%">
              <el-option v-for="item in organizationListOther"
                         :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>

        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {findRelativeEnterpriseList,} from '@/api/organizationOuter/etpApi'
import {addRelativeUser,generateAccount} from '@/api/organizationOuter/userApi'
import {debounce} from "@/utils";
import {phoneChange, idChange, emailChange, inputWordChange} from "@/utils/fengwenxin_utils";
let defaultForm = {
  name: '',
  type: '0',
  account: '',
  phone: "",
  idType: "2",
  idNo: "",
  enterpriseId: "",
  enterpriseOtherId: "",
  email: "",
}
export default {
  components: {},
  data() {
    return {
      title: "新增用户",
      form: JSON.parse(JSON.stringify(defaultForm)),
      organizationList:[],
      open: false,
      rules: {
        name: [
          {required: true, message: '请输姓名', trigger: 'change'},
          { validator:inputWordChange, trigger: 'change' },
          {min: 2, max: 50, message: '姓名请输入2-25个字', trigger: 'change'}

        ],
        account: [
          {required: true, message: '还未生成账号', trigger: 'change'},
        ],
        type: [
          {required: true, message: '请选择用户组织类型', trigger: 'change'},
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'change'},
          { validator:phoneChange, trigger: 'blur'},
        ],
        idNo: [
          {  validator:idChange, trigger: 'change' }
        ],
        email: [
          {  validator:emailChange, trigger: 'blur' }
        ],
      }
    };
  },
  computed:{
    organizationListOther(){
      return  this.organizationList.filter(item=> item.value != this.form.enterpriseId)
      //  this.organizationList.forEach(item => {
      //    if(item.value == this.form.enterpriseId){
      //      item.disabled = true;
      //    }else{
      //     item.disabled = false;
      //   }
      // })
      // return this.organizationList;
    }
  },
  created() {
    this.enterpriseList();
  },
  methods: {
    enterpriseChange(val){
      const enterpriseOtherIds = this.form.enterpriseOtherId;
      const index = enterpriseOtherIds.findIndex(ele => ele == val)
      enterpriseOtherIds.splice(index,1)
      // console.log('enterpriseOtherIds',enterpriseOtherIds,index)
      this.form.enterpriseOtherId  = enterpriseOtherIds;
    },
    enterpriseList(){
      findRelativeEnterpriseList({
        pageSize:5000,
        pageNo:1,
      }).then(res => {
        let list = res.data.list || [];
        this.organizationList = list.map(item=>{
          return {
            label:item.name,
            value:Number(item.id)
          }
        })
      }).catch(err => {
        console.log('err', err)
      })
    },
    grtAccount:debounce(function (){
      generateAccount({
        nickname:this.form.name,
        type:'2',
      }).then(res=>{
        this.form.account = res.data;
      }).catch(err=>{
        console.log('err',err)
      })
    }),
    handleadd(type, item) {
      this.open = true;
      // this.title = "新增组织相对方";
    },
    submitForm() {
      // debugger
      this.$refs['form'].validate(valid=>{
        if(!valid) return;
        console.log('jiek', this.form)
        const post_data = Object.assign({},this.form)
        const enterpriseOtherId = post_data.enterpriseOtherId;
        if(enterpriseOtherId.length>0){
          post_data.enterpriseOtherId = JSON.stringify(enterpriseOtherId)
        }else{
          post_data.enterpriseOtherId = '';
        }

        addRelativeUser(post_data).then((response) => {
          this.$message({
            message: '提交成功',
            type: 'success'
          });
          this.open = false;
          this.$emit("getList");
        }).catch(err => {
          console.log(err)
        });
      })

    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 重置按钮操作 */
    resetForm() {
      this.form = JSON.parse(JSON.stringify(defaultForm))
    },
  },
};
</script>
<style scoped>
</style>
